<template>
	<view>
		<view class="top">
			<view class="dl">
				<view class="avatar">
					<u-avatar :src="userbase.avatarUrl" size="140rpx"></u-avatar>
				</view>
				<view class="user">
					<view @click="login">{{userbase.nick}}</view>
					<view :style="{display:userbase.id? 'block':'none'}">ID {{userbase.id}} | 成长值
						{{userLevel.upgradeScore}} 段位 {{userLevel.name}}
					</view>
				</view>
				<view class="bt">
					<button class="btn" @click="yonghu">个人资料</button>
				</view>
			</view>
		</view>
		<view class="min">
			<u-row class="row">
				<u-col span="4" @click="integral">
					<view>
						<view class="num">{{amount.score}}</view>
						<view class="word">积分</view>
					</view>
				</u-col>
				<u-col span="4" @click="coupon">
					<view>
						<view class="num">{{canFetch.canUse}}</view>
						<view class="word">优惠券</view>
					</view>
				</u-col>
				<u-col span="4" @click="yue">
					<view>
						<view class="num">{{amount.balance}}</view>
						<view class="word">余额</view>
					</view>
				</u-col>
			</u-row>
			<u-row class="row" justify="space-between"
				customStyle="margin-bottom: 0rpx;border-radius: 20rpx 20rpx 0 0;border-bottom:3rpx solid #fcfdfd"
				@click="dingdan">
				<u-col span="3">
					<view class="dingdan">我的订单</view>
				</u-col>
				<u-col span="4">
					<view class="all">
						<text>查看全部订单</text>
						<u-icon name="arrow-right" labelPos="left"></u-icon>
					</view>
				</u-col>
			</u-row>
			<u-row class="row" customStyle="border-radius: 0 0 20rpx 20rpx;" @click="dingdan">
				<u-col span="2.4">
					<view>
						<u-icon name="red-packet" class="icon" size="50"></u-icon>
						<view class="word">待付款</view>
					</view>
				</u-col>
				<u-col span="2.4">
					<view>
						<u-icon name="clock" class="icon" size="50"></u-icon>
						<view class="word">待发货</view>
					</view>
				</u-col>
				<u-col span="2.4">
					<view>
						<u-icon name="car" class="icon" size="50"></u-icon>
						<view class="word">待收货</view>
					</view>
				</u-col>
				<u-col span="2.4">
					<view>
						<u-icon name="order" class="icon" size="50"></u-icon>
						<view class="word">评价</view>
					</view>
				</u-col>
				<u-col span="2.4">
					<view>
						<u-icon name="rmb-circle" class="icon" size="50"></u-icon>
						<view class="word">退款/售后</view>
					</view>
				</u-col>
			</u-row>
			<u-row class="row"
				customStyle="margin-bottom: 0rpx;border-radius: 20rpx 20rpx 0 0;border-bottom:3rpx solid #fcfdfd">
				<u-col span="3">
					<view class="dingdan">常用功能</view>
				</u-col>
			</u-row>
			<u-row class="row" customStyle="margin-bottom: 0rpx;border-radius: 0;">
				<u-col span="3" @click="qianbao">
					<view>
						<u-icon name="red-packet" class="icon2" size="50"></u-icon>
						<view class="word">我的钱包</view>
					</view>
				</u-col>
				<u-col span="3" @click="jifen">
					<view>
						<u-icon name="gift" class="icon2" size="50"></u-icon>
						<view class="word">兑换积分</view>
					</view>
				</u-col>
				<u-col span="3" @click="youhui">
					<view>
						<u-icon name="coupon" class="icon2" size="50"></u-icon>
						<view class="word">优惠券</view>
					</view>
				</u-col>
				<u-col span="3" @click="dizhi">
					<view>
						<u-icon name="map" class="icon2" size="50"></u-icon>
						<view class="word">收货地址</view>
					</view>
				</u-col>
			</u-row>
			<u-row class="row"
				customStyle="margin-bottom: 0rpx;border-radius: 0 0 20rpx 20rpx;border-bottom:3rpx solid #fcfdfd">
				<u-col span="3" @click="shezhi">
					<view>
						<u-icon name="setting" size="50" class="icon2"></u-icon>
						<view class="word">设置</view>
					</view>
				</u-col>
				<u-col span="3" @click="zhuti">
					<view>
						<u-icon name="account" class="icon2" size="50"></u-icon>
						<view class="word">主题</view>
					</view>
				</u-col>
			</u-row>
			<view style="text-align: center;margin: 20rpx;">Copyright © 2019-2022 v-shop | v2 </view>
			<view style="text-align: center;">最后发布时间：202208161505 </view>
		</view>
	</view>
</template>
<script>
	import {
		Detail,
		Amount,
		Statistics,
		Coupon
	} from "../../api/mine.js"
	export default {

		data() {
			return {
				
				userbase: {
					nick: "登录/注册",
					id: "",
				},
				userLevel: {
					upgradeScore: "",
					name: ""
				},
				amount: {
					score:'--',
					balance:'--'
				},
				orderList: [],
				canFetch: {
					canUse:'--'
				},
				show: true,
				token: ''
			}
		},
		methods: {
			// 用户详情
			getDetail() {
				Detail().then(res => {
						if (res.code === 0) {
							this.userbase = res.data.base
							this.userLevel = res.data.userLevel
						}
					
				})

		},
		// 用户资产
		getAmount() {
			Amount().then(res => {
				// console.log(res)
				if (res.code === 0) {
					this.amount = res.data
				}
			})

		},
		// 订单统计
		getStatistics() {
			Statistics().then(res => {
				// console.log(res)
				if (res.code === 0) {
					this.orderList = res.data;
				}
			})
		},
		// 优惠劵统计
		getCoupon() {
			this.token = uni.getStorageSync("token")
			if (this.token) {
				Coupon().then(res => {
					// console.log(res,"优惠券")
					if (res.code === 0) {
						this.canFetch = res.data
						console.log(res)
					}
				})
			}
		},

		integral() {
			uni.navigateTo({
				url: "../integral/integral"
			})
		},
		coupon() {
			uni.navigateTo({
				url: "../coupon/coupon"
			})
		},
		yue() {
			uni.navigateTo({
				url: "../wallet/wallet"
			})
		},
		// 点击登录跳转
		login() {
			uni.navigateTo({
				url: "../login/login"
			})
		},
		// 点击用户详情跳转
		yonghu() {
			uni.navigateTo({
				url: "../profile/profile"
			})
		},
		// 点击订单跳转
		dingdan() {
			uni.navigateTo({
				url: "../order/order"
			})
		},
		// 点击钱包跳转
		qianbao() {
			uni.navigateTo({
				url: "../wallet/wallet"
			})
		},
		// 点击积分跳转
		jifen() {
			uni.navigateTo({
				url: "../integral/integral"
			})
		},
		// 点击优惠券跳转
		youhui() {
			uni.navigateTo({
				url: "../coupon/coupon"
			})
		},
		// 点击收货地址跳转

		dizhi() {
			uni.navigateTo({
				url: "../address/address"
			})
		},
		// 点击设置跳转
		shezhi() {
			uni.navigateTo({
				url: "../setting/setting"
			})
		},
		// 点击主体跳转
		zhuti() {
			uni.navigateTo({
				url: "../theme/theme"
			})
		},
	},
	onReady() {
		this.getAmount()
		this.getStatistics()
		this.getCoupon()
	},
	onShow(){
		this.getDetail()
	}
	}
</script>

<style lang="scss" scoped>
.top {
		background-color: #1ba784;
		padding: 60rpx 0 160rpx 0;

		.dl {
			height: 140rpx;
			line-height: 140rpx;
			color: white;

			.avatar {
				width: 140rpx;
				height: 140rpx;
				float: left;
				margin: 0 20rpx 0 30rpx;
			}

			.user {
				width: 400rpx;
				height: 140rpx;
				line-height: 140rpx;
				display: flex;
				float: left;
				flex-wrap: wrap;
				align-items: center;
			}

			.user>view {
				font-size: 40rpx;
				width: 390rpx;
				height: 70rpx;
				line-height: 70rpx;
				white-space: nowrap;
			}

			.user>view:nth-child(2) {
				font-size: 24rpx;
			}

			.bt {
				display: flex;
				height: 140rpx;
				align-items: center;
				flex-direction: row-reverse;

				.btn {
					width: 128rpx;
					height: 40rpx;
					line-height: 40rpx;
					color: white;
					opacity: 0.9;
					background-color: #16866a;
					margin: 0;
					border-radius: 20rpx 0 0 20rpx;
				}
			}
		}
	}
	.min {
		padding: 30rpx;
		background-color: #f7f8fa;

		.row {
			background-color: white;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.icon {
				padding: 0 20rpx 0 48rpx;
			}

			.icon2 {
				padding: 0 20rpx 0 60rpx;
			}

			.num {
				text-align: center;
				font-size: 32rpx;
				font-weight: 800;
				margin: 10rpx 0;
			}

			.word {
				text-align: center;
				font-size: 24rpx;
				margin-bottom: 20rpx;
			}

			.dingdan {
				font-size: 28rpx;
				font-weight: 800;
				text-align: center;
				margin: 20rpx 0;
			}

			.all {
				font-size: 24rpx;
				color: #969799;
				justify-content: baseline;
			}
		}
	}
</style>
